/**
 * @author:linjiye
 * @date: 2024/12/25
 * @desc:
 **/

import {Dimensions, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {type ReactElement, useState} from 'react'
import {Button, Modal} from "@ant-design/react-native";
import Animated from "react-native-reanimated";
import fcButton from "@/components/FcButton";

type Props = {
    children?: ReactElement,
    background?: ReactElement,
    title?: ReactElement,
    header?: ReactElement,
    bottom?: ReactElement,
    titleRight?: ReactElement,
    titleLeft?: ReactElement,
    footer?: Array<any>,
    onFcModalClose?: Function,
    isOpen?: boolean,
    style?: object,
    titleShow?: boolean,
    closeShow?: boolean,
    titleText?: string,
    titleDesc?: string,
    titleHeight?: number,
    titleBottomBorderWidth?: number,
    modalType?: string,
    animationType?: string,
    transparent?: boolean,
    maskClosable?: boolean,
}

const screenHeight = Dimensions.get('window').height;
const MaxHeightBFB = 88

const FcModal = ({
                     children,
                     isOpen,
                     style,
                     modalType = 'portal',
                     animationType = 'slide-up',
                     transparent = false,
                     maskClosable = false,
                     onFcModalClose,
                     titleText,
                     titleDesc,
                     titleRight,
                     titleLeft,
                     titleHeight = 56,
                     background,
                     title,
                     titleShow = true,
                     closeShow = true,
                     header,
                     bottom,
                     footer,
                     titleBottomBorderWidth = 0.5,
                 }: Props) => {
    const [bgH, setBgHeight] = useState(0)
    const [titleH, setTitleHeight] = useState(0)
    const [headerH, setHeaderHeight] = useState(0)
    const [bottomH, setBottomHeight] = useState(0)

    const handleClose = () => {
        // @ts-ignore
        onFcModalClose(false)
    }
    const getBgInfo = (event: any) => {
        const {height} = event.nativeEvent.layout;
        setBgHeight(height)
    }
    const getTitleInfo = (event: any) => {
        const {height} = event.nativeEvent.layout;
        setTitleHeight(height)
    }
    const getHeaderInfo = (event: any) => {
        const {height} = event.nativeEvent.layout;
        setHeaderHeight(height)
    }
    const getBottomInfo = (event: any) => {
        const {height} = event.nativeEvent.layout;
        setBottomHeight(height)
    }
    return (
        <Modal
            popup
            modalType={modalType}
            visible={isOpen}
            animationType={animationType}
            transparent={transparent}
            maskClosable={maskClosable}
            style={[{
                maxHeight: transparent ? `100%` : `${MaxHeightBFB}%`,
                minHeight: (transparent ? 0 :400),
                borderTopLeftRadius: 12,
                borderTopRightRadius: 12,
                width: '100%'
            }, style, styles.innerContainer]}
            onClose={handleClose}
            footer={footer}
        >

            {titleShow && closeShow && <Text style={styles.close} onPress={handleClose}>&#xe66a;</Text>}

            {titleShow && titleLeft && <View style={styles.close}>{titleLeft}</View>}
            
            {background &&
                <View onLayout={getBgInfo}>{background}</View>
            }
            <View style={[styles.modal_wrap, {marginTop: -bgH}]}>
                {title && titleShow &&
                    <View style={styles.modal_title} onLayout={getTitleInfo}>{title}</View>
                }
                {!title && titleShow &&
                    <View style={[styles.modal_title, {height: titleHeight, borderBottomWidth: titleBottomBorderWidth}]}
                          onLayout={getTitleInfo}>
                        <Text style={styles.modal_title_text}>{titleText}</Text>
                        {titleDesc && <Text style={styles.modal_title_time}>{titleDesc}</Text>}
                        {titleRight && <View style={styles.modal_title_right}>{titleRight}</View>}
                    </View>
                }

                {header &&
                    <View onLayout={getHeaderInfo}>{header}</View>
                }

                <Animated.ScrollView
                    style={[styles.modal_content_wrap, {maxHeight: screenHeight * (MaxHeightBFB / 100) - titleH - headerH - bottomH}]}>
                    <View style={[styles.modal_content, {minHeight: 400 - titleH - headerH - bottomH}]}>{children}</View>
                </Animated.ScrollView>

                {bottom &&
                    <View style={{minHeight: 90}} onLayout={getBottomInfo}>{bottom}</View>
                }
            </View>
        </Modal>
    )
}

export default FcModal

const styles = StyleSheet.create({
    modal_wrap: {
        width: '100%'
    },
    modal_content_wrap: {
        width: "100%",
        overflowY: "auto",
    },
    modal_content: {
        minHeight: 50
        // padding: 16,
        // gap: 16,
    },
    modal_title: {
        width: '100%',
        height: 56,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
        borderBottomColor: 'rgba(0,0,0,0.1)',
        borderBottomWidth: 0.5,
    },
    modal_title_text: {
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)',
        fontWeight: '500'
    },
    modal_title_time: {
        fontSize: 12,
        color: '#9E9E9E',
        marginTop: 2
    },
    close: {
        fontFamily: 'FcIconFont',
        fontSize: 24,
        color: 'black',
        position: "absolute",
        left: 16,
        top: 16,
        zIndex: 100
    },
    innerContainer: {
        // width: 316,
        // marginHorizontal: 0,
        paddingTop: 10
    },
    modal_title_right: {
        position: 'absolute',
        right: 11,
        top: 0,
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        textAlignVertical: 'center',
    }
})